html
<template>
  <div class="input-form">
    <el-input
      v-model="alias"
      placeholder="请输入品类"
      class="input-field"
    ></el-input>
    <el-input
      v-model="name"
      placeholder="请输入名称"
      class="input-field"
    ></el-input>
    <div class="btn-group">
      <el-button type="primary" @click="handleConfirm"
        >确认添加<el-icon name="el-icon-check"></el-icon
      ></el-button>
      <el-button @click="handleCancel"
        >取消添加<el-icon name="el-icon-close"></el-icon
      ></el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { addCate } from "../../api/data";
export default {
  data() {
    return {
      alias: "",
      name: "",
    };
  },
  methods: {
    handleConfirm() {
      let Authorization = this.$store.state.user.token;
      let form = { alias: this.alias, name: this.name };
      let params = [form, Authorization];

      addCate(params).then(({ data: res }) => {
        if (res.status == 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.handleCancel();
        } else {
          this.$message({
            message: "添加失败" + res.message,
            type: "warning",
          });
        }
      });
    },
    handleCancel() {
      // 清空输入框数据
      this.alias = "";
      this.name = "";
    },
  },
  computed: {
    ...mapState({
      userToken: (state) => state.user.token,
    }),
  },
  created() {},
};
</script>

<style scoped>
.input-form {
  max-width: 400px;
  margin: 0 auto;
}

.input-field {
  margin-bottom: 10px;
}

.btn-group {
  text-align: center;
  margin-top: 20px;
}

.el-icon {
  margin-left: 5px;
}
</style>